<template>
  <div class="header-wrapper">
    <div class="header-left">
      <img src="../images/jjj-logo.png" alt="" class="icon-logo" />
    </div>
    <div class="header-right">
      <!-- 天气 -->
      <!-- <weather /> -->
      <!-- 时间 -->
      <header-time />
      <!-- 操作项 -->
      <ul class="handle-menu">
        <li>
          <svg-icon icon-class="home" />
          首页
        </li>
        <li>
          <svg-icon icon-class="user" />
          陈国震
        </li>
        <li>
          <svg-icon icon-class="exit" />
          退出
        </li>
        <li>
          <svg-icon icon-class="full-screen" />
        </li>
      </ul>
    </div>
    <div class="bg">
      <img class="left" src=".././images/header-l.png" alt="" />
      <img class="right" src=".././images/header-r.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: ''
}
</script>
<script setup>
import { areaConfig } from '@/config/city-config.js'
import HeaderTime from '.././Time.vue'
import { useStore } from 'vuex'
import { ref, defineProps } from 'vue'

const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const store = useStore()
/**
 * @desc 获取用户信息
 * ***/
const userInfo = {
  userId: '18118992188',
  uuid: '64D8175EE5074B0BBCE647DC785E8C9C',
  name: '戈权民',
  mobile: '18118992188',
  active: true,
  photoUrl: null,
  orgInfos: [
    {
      orgId: '8a819e536521ad6f0165994f55130033',
      departmentId: '0bd2345d3e784a28b7667809ef2aec0d',
      orgName: '江苏省交通运输厅公路事业发展中心',
      departmentName: '局领导',
      businessHandleList: [
        {
          handleName: '地质灾害',
          handleCode: 'TCA1',
          coordinationCode: 'DISPATCH',
          resources: 'road,mileage'
        },
        {
          handleName: '施工养护',
          handleCode: 'JEA1',
          coordinationCode: 'DISPATCH',
          resources: 'road,mileage'
        },
        {
          handleName: '计划其他',
          handleCode: 'JGA1',
          coordinationCode: 'DISPATCH',
          resources: 'road,mileage'
        },
        {
          handleName: '恶劣天气',
          handleCode: 'TBA1',
          coordinationCode: 'DISPATCH',
          resources: 'road,mileage'
        },
        {
          handleName: '突发其他',
          handleCode: 'TDA1',
          coordinationCode: 'DISPATCH',
          resources: 'road,mileage'
        },
        {
          handleName: '重大活动',
          handleCode: 'JFA1',
          coordinationCode: 'DISPATCH',
          resources: 'road,mileage'
        },
        {
          handleName: '事故灾害',
          handleCode: 'TAA1',
          coordinationCode: 'DISPATCH',
          resources: 'road,mileage'
        }
      ]
    }
  ]
}
store.commit('user/setUserInfo', userInfo)
</script>

<style scoped lang="less">
@import url(../../../../business-component/styles/themes);
@height: 67px;

.header-wrapper {
  display: flex;
  position: relative;
  height: @height;
  justify-content: space-between;

  > div {
    z-index: 2;
  }

  .header-left {
    margin-left: 20px;
    display: flex;
    align-items: center;

    .icon-logo {
      width: 340px;
      height: 38px;
      margin-bottom: 7px;
    }

    h1 {
      font-family: @font-title-family;
      background: @primary-color linear-gradient(0deg, @primary-color 43%, #269bff 86%);
      background-clip: text;
      color: transparent;
      font-size: 30px;
      letter-spacing: 1.5px;
      line-height: 65px;
      width: 400px;
    }

    .select-box {
      margin-top: 20px;

      .selectCss() {
        font-family: @font-title-family;
        color: @primary-color;
        letter-spacing: 1.68px;
        font-size: 15px;
      }

      /deep/.ant-select-selector {
        border: 0;
        width: 120px;
        height: 43px;
        text-align: center;
        color: @primary-color;

        .ant-select-selection-item {
          .selectCss();
          line-height: 35px;
        }
      }

      /deep/.ant-select-arrow {
        right: 0.22rem;
        margin-top: -0.115rem;
      }

      /deep/.ant-select-single.ant-select-open .ant-select-selection-item {
        .selectCss();
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    margin-right: 20px;
    padding-top: 5px;
    color: #555555;

    .organization {
      list-style: none;
    }

    .handle-menu {
      display: flex;
      align-items: center;
      padding-top: 11px;
      padding-left: 20px;

      li {
        font-size: 14px;
        color: @primary-color;
        margin-left: 30px;
        list-style: none;
        display: flex;
        align-items: center;
        cursor: pointer;

        &:hover {
          color: #edaa0a;
        }

        .svg-icon {
          margin-right: 10px;
          font-size: 16px;
        }
      }
    }
  }

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    z-index: 1;

    .left {
      height: 100%;
      flex-shrink: 0;
    }

    .right {
      flex: 1;
    }
  }
}
</style>
<style lang="less">
.header-select {
  width: 100px !important;
  min-width: auto !important;
  overflow: hidden;
  padding: 0;
  border: 1px solid #83a3e2;

  .ant-select-item-option-selected {
    background: #dee9f9 !important;
    font-weight: 400 !important;
  }
}

.rc-virtual-list-scrollbar-show {
  width: 4px !important;
}

.rc-virtual-list-scrollbar-thumb {
  opacity: 0.2;
}
</style>
